﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0,
          maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .dv {
            width: 350px;
            height: 240px;
            border: 1px solid rgba(0, 0, 0, .4);
            border-radius: 5%;
            margin: 20px auto 0;
        }

        h3 {
            text-align: center;
            font: normal normal 800 20px/40px '微软雅黑';
            color: #666;
        }

        ul > li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        .dv:hover {
            box-shadow: 5px 5px 30px rgba(0, 0, 0, .3);
        }

        label {
            color: #666;
        }

        input {
            width: 200px;

            outline: none;
            padding: 2px 5px;
        }

        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div class="dv">
    <form action="/test/user/login" method="post">
        <h3>测试登录</h3>
        <ul>
            <li>
                <label for="account">用户名：</label>
                <input type="text" id="account" name="account"/>
            </li>
            <li>
                <label for="password">密 &nbsp;&nbsp;码：</label>
                <input type="text" id="password" name="password"/>
            </li>
            <li>
                <label for="code">验证码：</label>
                <input type="text" id="code" name="code" style="width:95px;"/>
                <img src="http://localhost:8080/captchaA" width="100px" height="35px"
                     alt="验证码"/>
            </li>
            <li>
                <input type="submit" value="登录" style="width: 80px;">
            </li>
        </ul>
    </form>
</div>
<script type="application/javascript">
    /*切换验证码*/
    let img = document.getElementsByTagName("img")[0];
    img.addEventListener("click", () => {
        // 修改图片 src 属性，添加新的查询参数来强制刷新图片
        const timestamp = new Date().getTime();
        img.src = `http://localhost:8080/captchaA?timestamp=${timestamp}`;
    })
</script>
</body>
</html>